<template>
    <div id="classify" class="align-between">
        <div class="classify-list align-between">
            <div class="draggable-container flex-between">
                <div class="classify-select-container align-start" v-for="(item, index) in description.classifyArea[active].field" :key="index">
                    <div class="select-name">{{item.name}}</div>
                    <draggable class="draggable-select-c " :class="'select'+description.classifyArea[active].field.length" :data-index="index" draggable=".img-container" :options="bottomOptions" v-model="answerArry[index]">
                        <div :style="overField?'width:45%':''" class="select-container flex-center" :class="'field'+description.classifyArea[active].field.length" v-for="(item, innerIndex) in answerNum" :key="innerIndex">
                            <div class="classify-answer flex-center">
                                <!-- {{answerArry[index]}} -->
                                <img v-if="answerArry[index][innerIndex]" :src="answerArry[index][innerIndex].src">
                            </div>
                        </div>
                    </draggable>
                </div>
            </div>
            <draggable :options="bottomOptions">
                <div class="release-drag"></div>
            </draggable>
            <div class="classity-type align-between">
                <div :class="['classify-item','pointer',{'classify-item-active':active===index}]" v-for="(item, index) in description.classifyArea" :key="item.showName" @click="changeClassifyType(index)">
                    {{item.showName}}
                </div>
            </div>
        </div>
        <bottom-handle :restScrollWidth.sync="restScrollWidth" :copyOverflow.sync="copyOverflow" :noOverflow.sync="noOverflow" :contentNum.sync="contentNum" ref="bottom">
            <draggable ref="drag" class=" flex-start" v-model="copyimgList" draggable=".img" :move="onMove" @end="onEnd" :options="bottomOptions">
                <img @dblclick="bigImg(item)" class="img pointer" :data-index="index" :data-id="item.id" v-for="(item, index) in copyimgList" :key="index" :src="item.src" alt="加载失败" title="双击放大">
            </draggable>
        </bottom-handle>
    </div>
</template>

<script>
import bottomHandle from '../../components/bottomHandle'
import draggable from "vuedraggable"
import classify from '../../mixin/classify'
import bus from '../../../content/assets/js/bus'
export default {
    name: "classify",
    components: { draggable, bottomHandle },
    mixins: [classify],
    data() {
        return {
            active: 0,
            bottomOptions: {
                group: "collection",
                forceFallback: true,
                sort: false,
            },
            scrollLeft: 0,
            scrollWidth: 0,
            noOverflow: false,
            answerArry: [],
            targetDomIndex: -1,
            copyimgList: [],
            contentNum: 0,
            overField: false,
            copyOverflow: false,
            restScrollWidth: false,
        }
    },
    created() {
        if (this.description) {
            let newArry = new Array()
            this.description.waitingForSelect.map(v => {
                let suffix = this.getFileSuffix(v.content)
                v.src = window.$DATADIR + `resc/Collection/${this.id}/${v.content.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, suffix)}`
            })
        }
        this.overField = this.description.classifyArea[0].field.length > 3
        this.copyimgList = JSON.parse(JSON.stringify(this.description.waitingForSelect))
        if (this.description.classifyArea[this.active].field) {
            this.description.classifyArea[this.active].field.forEach((v, i) => {
                this.answerArry.push([])
            })
        }
    },
    mounted() {
        console.log('classify');
        this.$nextTick(() => {
            if (this.noOverflow) {
                this.restDragMaxWidth(this.$refs.drag.$el)
            }
        })
    },
    watch: {
        active(nval) {
            this.answerArry = []
            this.description.classifyArea[nval].field.forEach((v, i) => {
                this.answerArry.push([])
            })
        },
    },
    computed: {
        currentAnswer() {
            let newArry = new Array()
            this.description.classifyArea[this.active].field.forEach(v => {
                newArry.push(v.answer)
            })
            return newArry
        },
        answerNum() {
            return (this.description.waitingForSelect.length + 3 - this.description.waitingForSelect.length % 3) < 12 ? 6 : 12
        },
    },
    methods: {
        bigImg(item){
            console.log('双击',item);
            bus.$emit('showbigImg',item)
        },
        changeClassifyType(index) {
            if (this.active === index) return
            this.overField = false
            if (this.description.classifyArea[index].field.length > 3) {
                this.overField = true
            }
            this.active = index
            this.copyimgList = JSON.parse(JSON.stringify(this.description.waitingForSelect))
            this.$refs.drag.$el.style.maxWidth = ''
            this.noOverflow = this.copyOverflow
            this.restScrollWidth = true
            this.$nextTick(() => {
                this.restDragMaxWidth(this.$refs.drag.$el)
            })
        },
        onMove(customEvent) {
            this.targetDomIndex = customEvent.to.dataset.index ? parseInt(customEvent.to.dataset.index) : -1
            return false
        },
        onEnd(customEvent) {
            if (this.targetDomIndex === -1) return
            let answer = this.currentAnswer[this.targetDomIndex]
            if (!answer) return
            let answerId = parseInt(customEvent.item.dataset.id)
            let answerIndex = parseInt(customEvent.item.dataset.index)
            if (answer.includes(answerId)) {
                this.answerArry[this.targetDomIndex].push(this.copyimgList[answerIndex])
                this.copyimgList.splice(answerIndex, 1)
            }
            if (!this.noOverflow) {
                if (this.copyimgList.length <= this.contentNum) {
                    this.noOverflow = true
                }
            }
            this.$nextTick(() => {
                if (this.noOverflow) {
                    this.restDragMaxWidth(this.$refs.drag.$el)
                }
            })
            this.targetDomIndex = -1
        },
    }
}
</script>

<style lang="scss">
::-webkit-scrollbar-thumb {
    border-radius: 0.5vw!important;
    background: #E6EDF6 !important;
}
::-webkit-scrollbar {
    width: 0.25vw!important;
    
    background: transparent !important;
}
#classify {
    height: 100%;
    .classify-list {
        height: 33.6vw;
        width: 80vw;
        background-color: #fff;
        border-radius: 20px;
        position: relative;
        .draggable-container {
            position: absolute;
            z-index:1;
            top: 20px;
            left: 30px;
            right: 30px;
            background-color: #fff;
            height: calc(100% - 80px);
        }
        .release-drag {
            background-color: #fff;
            position: absolute;
            // z-index: 88;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            border-radius: 20px;
        }
        .select-name {
            font-size: 1.75em;
            margin-bottom: 15px;
        }
        .classify-select-container {
            flex: 1;
            height: 100%;
            &:not(:last-child) {
                margin-right: 40px;
            }
            &:first-child{
                margin-left: 20px;
            }
            &:last-child{
                margin-right: 20px;
            }
        }
        .draggable-select-c {
            width: 100%;
            height: 100%;
            // min-height: 400px;
            overflow: auto;
            background: rgba(208, 225, 246, 1);
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-self: flex-start;
            flex-wrap: wrap;
        }
        .select2{
            padding: 1.8vw 0 ;
        }
        .select3{
            padding: 2vw 0 ;
        }
        .select4{
            padding: 1.6vw 0 ;
        }
        .select-container {
            width: 32%;
            border-radius: 10px;
            // padding: 10px 0;
            height: 130px;
            img {
                border-radius: 8px;
                width: 100px;
                height: 100px;
                box-shadow: 0px 3px 0px 0px rgba(95, 171, 255, 0.2);
            }
            .classify-answer {
                width: 100px;
                height: 100px;
                background-image: url(../../assets/img/rect-bg.png);
                background-size: cover;
            }
        }
        .field2{
            width: 30%;
            border-radius: 10px;
            height: 10.7vw;
            
            img {
                border-radius: 8px;
                width: 9.2vw;
                height: 9.2vw;
                box-shadow: 0px 3px 0px 0px rgba(95, 171, 255, 0.2);
            }
            .classify-answer {
                width: 9.1vw;
                height: 9vw;
                background-image: url(../../assets/img/rect-bg.png);
                background-size: cover;
                background-repeat: no-repeat;
            }
        }
        .field3{
            width: 40%;
            border-radius: 10px;
            // padding-left:10px;
            height: 8.4vw;
            img {
                border-radius: 8px;
                width: 6.8vw;
                height: 6.8vw;
                box-shadow: 0px 3px 0px 0px rgba(95, 171, 255, 0.2);
            }
            .classify-answer {
                width: 6.9vw;
                height: 6.8vw;
                background-image: url(../../assets/img/rect-bg.png);
                background-size: cover;
            }
        }
        .field4{
            width: 100%;
            // width: 15vw !important;
            border-radius: 10px;
            height: 7.5vw;
            img {
                border-radius: 8px;
                width: 6vw;
                height: 6vw;
                box-shadow: 0px 3px 0px 0px rgba(95, 171, 255, 0.2);
            }
            .classify-answer {
                width: 6.1vw;
                height: 6vw;
                background-image: url(../../assets/img/rect-bg.png);
                background-size: cover;
            }
        }
        .classity-type {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translate(100%, -50%);
            .classify-item {
                min-height: 100px;
                width: 2.5vw;
                line-height: 2.5vw;
                border-radius: 0px 8px 8px 0px;
                font-size: 1.1vw;
                color: #FFFFFF;
                background: #B1C2D8;
                padding: 10px 0;
                text-align: center;
                writing-mode: vertical-lr;
                &:nth-child(2) {
                    margin: 10px 0;
                }
            }
            .classify-item-active {
                
                background: #4894ff;
                color: #fff;
            }
        }
    }
    .img {
        // overflow: hidden;
        margin-bottom: 5px;
        border-radius: 10px;
        width: 12.5vw;
        height: 12.5vw;
        min-width: 12.5vw;
        min-height: 12.5vw;
        max-width: 12.5vw;
        max-height: 12.5vw;
        &:not(:last-child) {
            margin-right: 30px;
        }
    }
    @media screen and(max-width: 1439px) {
        .classify-list {
            .draggable-container {
                // left: 10px;
                // right: 10px;
                // top: 10px;
                height: calc(100% - 60px);
            }
            // .select-container {
            //     img {
            //         max-width: 75px;
            //         max-height: 75px;
            //     }
            //     .classify-answer {
            //         max-width: 75px;
            //         max-height: 75px;
            //     }
            // }
        }
        .drag-list {
            height: 12vw;
            .img {
                width: 9.3vw;
                height: 9.3vw;
                min-width: 9.3vw;
                min-height: 9.3vw;
                max-width: 9.3vw;
                max-height: 9.3vw;
                &:not(:last-child) {
                    margin-right: 20px;
                }
            }
            .icon {
                width: 3vw;
                height: 3vw;
            }
        }
    }
}
</style>
